<template>
  <div>   
      <el-row style="background-color:#bae7ff">
        <el-col :span="4" class="text-center">
          <img src="@/assets/xw.jpg" style="width: 8rem; height: 5rem" />
        </el-col>

        <el-col :span="16" class="pt-4">
          <el-input placeholder="请输入搜索内容" v-model="searchVal">
            <!--插槽-->
            <template #append>
              <el-button type="info" plain @click="getNewsLi"><el-icon><Search /></el-icon></el-button>
            </template>
          </el-input>
        </el-col>

        <el-col :span="4" class="text-center my-auto">
          <div v-if="loginstatus">
            <el-button class="border-0" style="width: 4rem; height: 3rem">
            <img :src="headUrl" 
                style="width: 4rem; height: 3rem" 
                @click="this.$router.push('/person')">
            </el-button>
            <el-button type="primary" @click="this.$router.push('/login')">退出</el-button>
          </div>
          <div v-else>
            <el-button type="primary" @click="this.$router.push('/login')">登录</el-button>
            <el-button type="primary" @click="this.$router.push('/registry')">注册</el-button>
          </div>
        </el-col>
      </el-row>
       <el-row>
    <el-col :span="24">
        <el-menu mode="horizontal" class="border" :router="true" style="background-color:#1890ff">
          <el-menu-item class="fs-5" index="/">站点首页</el-menu-item>
          <el-menu-item class="fs-5" >国内新闻</el-menu-item>
          <el-menu-item class="fs-5" >国际新闻</el-menu-item>
        </el-menu>
    </el-col>
    </el-row>
  </div> 
</template>

<script>
import auth from '@/auth/auth.js'
export default {
   name: "NewsHeader",
   emits:["getSearchVal"],
    components: {
    },
    data(){
      return{
        searchVal: null,
        loginstatus: null,
        headUrl: null,
        newsli:[],
      }
    },
    methods:{
        getNewsLi(){
         this.$emit("getSearchVal" , this.searchVal);
        },
        isLogin() {
          this.loginstatus = auth.isLogin();
        },
    },
    mounted() {
      this.isLogin();
      this.headUrl = auth.getLoginUser().headUrl;
    }
};
</script>

<style>
</style>
